<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美味点餐 - 便捷的在线点餐平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/orders.css') }}">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7A00',
                        secondary: '#4CAF50',
                        neutral: {
                            100: '#F9F9F9',
                            200: '#E9E9E9',
                            300: '#DADADA',
                            400: '#BBBBBB',
                            500: '#999999',
                            600: '#777777',
                            700: '#555555',
                            800: '#333333',
                            900: '#1A1A1A',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.1)',
                        'cart': '0 0 20px rgba(0, 0, 0, 0.15)',
                    }
                },
            }
        }
    </script>
</head>

<body class="bg-neutral-100 font-sans text-neutral-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl">
                    <i class="fa fa-cutlery" aria-hidden="true"></i>
                </div>
                <h1 class="text-xl font-bold text-neutral-800">美味餐厅</h1>
            </div>

            <div class="hidden md:flex relative flex-1 max-w-md mx-6">
                <input type="text" placeholder="搜索菜品..."
                    class="w-full py-2 px-4 pl-10 rounded-full bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500"></i>
            </div>

            <div class="flex items-center space-x-4">
                <!-- 购物车图标 -->
                <button id="cartToggle" class="relative p-2 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-shopping-cart text-lg text-neutral-700"></i>
                    <span id="cartCount" class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center scale-in">0</span>
                </button>

                <!-- 用户图标 -->
                <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors md:hidden">
                    <i class="fa fa-user text-lg text-neutral-700"></i>
                </button>

                <!-- 汉堡菜单按钮 - 仅在移动设备显示 -->
                <button id="mobileMenuToggle" class="p-2 rounded-full hover:bg-neutral-100 transition-colors md:hidden">
                    <i class="fa fa-bars text-lg text-neutral-700"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 container mx-auto px-4 py-6">
        <!-- 分类导航栏 -->
        <div class="mb-6 overflow-x-auto scrollbar-hide">
            <div class="flex space-x-2 pb-2 min-w-max">
                {% for category in categories %}
                <button class="category-btn {% if loop.first %}bg-primary text-white{% else %}bg-white text-neutral-700 shadow-sm{% endif %} px-4 py-2 rounded-full text-sm font-medium transition-all">
                    {{ category }}
                </button>
                {% endfor %}
            </div>
        </div>

        <!-- 菜品列表 -->
        <div class="mb-16">
            <h2 class="text-xl font-bold mb-4 text-neutral-800">热门推荐</h2>

            <!-- 菜品网格 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {% for item in menu_items %}
                <div class="food-card bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1">
                    <div class="relative">
                        <img src="{{ item.image }}" alt="{{ item.name }}" class="w-full h-48 object-cover">
                        {% if item.tag %}
                        <span class="absolute top-3 left-3 {% if item.tag == '热销' %}bg-primary{% elif item.tag == '健康' %}bg-secondary{% elif item.tag == '特惠' %}bg-red-500{% endif %} text-white text-xs font-bold px-2 py-1 rounded-md">{{ item.tag }}</span>
                        {% endif %}
                        <button class="add-to-cart absolute bottom-3 right-3 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-primary/90 transition-colors"
                                data-id="{{ item.id }}"
                                data-name="{{ item.name }}"
                                data-price="{{ item.price }}"
                                data-img="{{ item.image }}">
                            <i class="fa fa-plus" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-1 text-neutral-800">{{ item.name }}</h3>
                        <p class="text-neutral-500 text-sm mb-2 line-clamp-2 text-balance">精选食材，美味可口，欢迎品尝</p>
                        <div class="flex items-center justify-between">
                            <span class="text-primary font-bold text-lg">¥{{ item.price }}</span>
                            <div class="flex items-center text-amber-400 text-sm">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <span class="ml-1 text-neutral-600">{{ item.rating }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- 加载更多按钮 -->
            <div class="mt-8 text-center">
                <button id="loadMore" class="px-6 py-3 bg-white border border-neutral-300 rounded-full text-neutral-700 font-medium hover:bg-neutral-50 transition-colors shadow-sm">
                    加载更多 <i class="fa fa-angle-down ml-1" aria-hidden="true"></i>
                </button>
            </div>
        </div>
    </main>

    <!-- 购物车侧边栏 -->
    <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full sm:w-96 bg-white shadow-cart z-50 transform translate-x-full transition-transform duration-300 ease-in-out">
        <div class="flex flex-col h-full">
            <div class="p-4 border-b border-neutral-200 flex items-center justify-between">
                <h2 class="text-xl font-bold text-neutral-800">我的购物车</h2>
                <button id="closeCart" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-times text-neutral-600"></i>
                </button>
            </div>

            <div id="cartItems" class="flex-1 overflow-y-auto p-4 space-y-4">
                <!-- 购物车为空时显示 -->
                <div id="emptyCart" class="h-full flex flex-col items-center justify-center text-neutral-500">
                    <i class="fa fa-shopping-cart text-5xl mb-4 opacity-30"></i>
                    <p class="text-lg">购物车还是空的</p>
                    <p class="text-sm mt-2">快去添加喜欢的美食吧~</p>
                </div>
            </div>

            <div class="p-4 border-t border-neutral-200 bg-white">
                <div class="flex justify-between mb-4">
                    <span class="text-neutral-600">合计:</span>
                    <span id="cartTotal" class="text-xl font-bold text-primary">¥0</span>
                </div>
                <button id="checkoutBtn" class="w-full bg-secondary text-white py-3 rounded-lg font-medium hover:bg-secondary/90 transition-colors disabled:bg-neutral-400 disabled:cursor-not-allowed" disabled>
                    去结算
                </button>
            </div>
        </div>
    </div>

    <!-- 购物车遮罩层 -->
    <div id="cartOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden fade-in"></div>

    <!-- 结算弹窗 -->
    <div id="checkoutModal" class="fixed inset-0 z-50 flex items-center justify-center hidden fade-in">
        <div class="absolute inset-0 bg-black bg-opacity-50" id="modalOverlay"></div>
        <div class="bg-white rounded-xl w-full max-w-md mx-4 z-10 overflow-hidden shadow-xl transform transition-all">
            <div class="p-5 border-b border-neutral-200 flex items-center justify-between">
                <h3 class="text-lg font-bold text-neutral-800">确认订单</h3>
                <button id="closeModal" class="p-1 rounded-full hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-times text-neutral-600"></i>
                </button>
            </div>

            <div class="p-5 max-h-[60vh] overflow-y-auto">
                <div class="mb-5">
                    <h4 class="text-sm font-medium text-neutral-500 mb-3">订单信息</h4>
                    <div id="orderItems" class="space-y-3">
                        <!-- 订单商品由JS动态生成 -->
                    </div>
                </div>

                <div class="border-t border-neutral-200 pt-4">
                    <h4 class="text-sm font-medium text-neutral-500 mb-3">用餐信息</h4>
                    <div class="mb-4">
                        <label for="tableNumber" class="block text-sm text-neutral-600 mb-1">房间号/桌号 <span class="text-red-500">*</span></label>
                        <input type="text" id="tableNumber"
                               class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all"
                               placeholder="请输入您的房间号或桌号">
                    </div>

                    <div class="flex justify-between items-center text-lg font-bold mb-2">
                        <span>总计:</span>
                        <span id="orderTotal" class="text-primary">¥0</span>
                    </div>
                </div>
            </div>

            <div class="p-5 border-t border-neutral-200">
                <button id="confirmOrder" class="w-full bg-secondary text-white py-3 rounded-lg font-medium hover:bg-secondary/90 transition-colors">
                    确认下单
                </button>
                <div id="orderLoading" class="hidden w-full bg-secondary/80 text-white py-3 rounded-lg font-medium flex items-center justify-center">
                    <i class="fa fa-spinner fa-spin mr-2"></i> 提交中...
                </div>
            </div>
        </div>
    </div>

    <!-- 支付成功弹窗 -->
    <div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center hidden fade-in">
        <div class="absolute inset-0 bg-black bg-opacity-50" id="successOverlay"></div>
        <div class="bg-white rounded-xl w-full max-w-sm mx-4 z-10 overflow-hidden shadow-xl text-center p-6">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-check text-2xl text-secondary"></i>
            </div>
            <h3 class="text-xl font-bold text-neutral-800 mb-2">下单成功</h3>
            <p class="text-neutral-600 mb-2">您的订单已提交，感谢您的购买！</p>
            <p class="text-sm text-neutral-500 mb-6">订单编号: <span id="orderId" class="font-medium text-primary"></span></p>
            <button id="closeSuccessModal" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                返回首页
            </button>
        </div>
    </div>

    <!-- 错误提示弹窗 -->
    <div id="errorModal" class="fixed inset-0 z-50 flex items-center justify-center hidden fade-in">
        <div class="absolute inset-0 bg-black bg-opacity-50" id="errorOverlay"></div>
        <div class="bg-white rounded-xl w-full max-w-sm mx-4 z-10 overflow-hidden shadow-xl text-center p-6">
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-exclamation-triangle text-2xl text-red-500"></i>
            </div>
            <h3 class="text-xl font-bold text-neutral-800 mb-2">提交失败</h3>
            <p id="errorMessage" class="text-neutral-600 mb-6">订单提交过程中出现错误，请稍后重试</p>
            <button id="closeErrorModal" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                关闭
            </button>
        </div>
    </div>

    <!-- 底部导航栏 - 仅在移动设备显示 -->
    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="flex justify-around">
            <a href="#" class="flex flex-col items-center py-3 px-4 text-primary">
                <i class="fa fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="{{ url_for('view_orders') }}" class="flex flex-col items-center py-3 px-4 text-neutral-500 hover:text-primary transition-colors">
                <i class="fa fa-list-alt text-lg"></i>
                <span class="text-xs mt-1">订单</span>
            </a>
            <a href="#" class="flex flex-col items-center py-3 px-4 text-neutral-500 hover:text-primary transition-colors">
                <i class="fa fa-user text-lg"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <!-- 引入JavaScript -->
    <script src="{{ url_for('static', filename='js/orders.js') }}"></script>
</body>
</html>
